<template>
  <el-container class="home_container">
    <el-header >
      <div >
        <img src="">
        <span>基于大数据集群的智能算法管理平台</span>
      </div>
      <el-button type="danger" @click = logOut>退出</el-button>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu

            class="el-menu-vertical-demo"
            active-text-color="#409EFF"
            :unique-opened="true"
            :router = "true"
        >

          <el-submenu :index="item.path" v-for="item in menulist" :key="item.path">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>{{ item.authName }}</span>
            </template>
            <el-menu-item :index="'/'+item2.path" v-for="item2 in item.children" :key="item2.path" >
              <i class="" ></i>
              <span slot="title">{{item2.authName}}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  data(){
    return{
      menulist:[
        // {
        //   authName : "首页",
        //   path: "home",
        // },
        {
          authName : "Docker",
          path: "docker",
          children:[{
            authName : "镜像管理",
            path: "image",
          },
            {
            authName : "容器管理",
            path: "containercreation",
          },
            {
            authName : "容器集群管理",
            path: "containerClusterCreation",
          },
          //   {
          //   authName : "负载",
          //   path: "load",
          // }
          ]
        },
        // {
        //   authName : "平台管理",
        //   path: "pfmanagement",
        //   children:[{
        //     authName : "基础资源",
        //     path: "basicresources",
        //   }]
        // },
        {
          authName : "计算任务",
          path: "computing_task",
          children:[
          //     {
          //   authName : "优化方案管理",
          //   path: "optimizeschememanagement",
          // },{
          //   authName : "容器方案管理",
          //   path: "containerschememanagement",
          // },
            {
            authName : "计算创建",
            path: "calculationcreation",
          },
            // {
            //   authName : "计算管理",
            //   path: "calculationmanagement",
            // },
            // {
            //   authName : "计算方案管理",
            //   path: "calculationschememanagement",
            // },{
            //   authName : "计算进度",
            //   path: "calculateprogress",
            // },{
            //   authName : "优化对比",
            //   path: "optimizationcomparison"}
          ]
        },
        // {
        //   authName : "用户",
        //   path: "users",
        //   children:[{
        //     authName : "用户管理",
        //     path: "usermanagement",
        //   },
        //     {
        //       authName : "用户日志",
        //       path: "userlog"},
        //     {
        //       authName : "页面测试",
        //       path: "test"}
        //   ]
        // }
      ],
      activePath:''
    }
  },
  methods: {
    logOut() {
      window, sessionStorage.removeItem('token')
      this.$router.push('/')
    },

  }
}
</script>
<style lang="less" scoped>
.home_container{
  height: 100%;
}
.el-header{
  background-color:   #464c5b;
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
  align-items: center;
  color: #fff;
  font-size: 30px;

}
.el-aside {
  background-color: whitesmoke;}

.el-menu {
  border-right: 0px;
}


.el-main{
  background-color:white ;
}

</style>
